<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-bind 完整写法 -->
      <input type="text" v-bind:value="msg" />
      <a v-bind:href="url">{{ text }}</a>
      <button v-bind:disabled="disabled">按钮</button>

      <!-- v-bind 简写方式 -->
      <input type="text" :value="msg" />
      <a :href="url">{{ text }}</a>
      <button :disabled="disabled">按钮</button>

      <hr />
      <!-- v-model -->
      <input type="text" v-model="val" />
      <textarea v-model="val"></textarea>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      /*
        指令语法：
          v-bind: 
            作用：单向数据绑定（给标签/元素属性绑定动态的值）
            语法：v-bind:属性名="JS表达式"  -> 简写 :属性名="JS表达式"

          v-model: 双向数据绑定（通常用于表单元素：input、select、textarea）
            作用：双向数据绑定（通常用于表单元素：input、select、textarea）
            语法：v-model="JS表达式"

          单向：
            数据只能由js（数据层）流向html（视图层）
            如果修改html（视图层）数据，js（数据层）是不变的

          双向：
            数据能由js（数据层）流向html（视图层）
            数据能由html（视图层）流向js（数据层）
      */
      const vm = new Vue({
        data: {
          msg: "hello v-bind",
          url: "http://www.atguigu.com",
          text: "尚硅谷",
          disabled: false,

          val: "test",
        },
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
